<!DOCTYPE html>

<head>
	<meta charset="UTF-8">
	<title>注册页面</title>
	<style>
		body {
			background-image: url(img/3.png);
			background-size: 100% 100%;
			background-size: 100%;
			background-repeat: no-repeat;
		}
		
		.form {
			width: 980px;
			margin: 150px auto 60px auto;
		}
		
		.form h2 {
			text-align: center;
			font-size: 38px;
			height: 22px;
			margin-bottom: 90px;
		}
		
		.error {
			color: red;
			height: 20px;
		}
		
		label.error {
			float: left;
		}
		
		#regist-form {
			margin-left: 650px;
			width: 800px;
		}
		
		#regist-form a {
			color: orange;
		}
		
		input.layui-input {
			width: 410px;
		}
		
		input.layui-input.phone {
			width: 202px;
			margin-right: 96px;
		}
		
		div.layui-form-item {
			width: 410px;
		}
		
		#regist {
			margin-left: 168px;
		}
		
		#login {
			margin-left: 248px;
		}
		
		.space {
			margin-top: 30px;
		}
		
		.xieyi {
			margin-left: 140px;
		}
		
		.a {
			display: inline-block;
		}
		
		#redistBox {
			z-index: 999;
			position: relative;
		}
	</style>
	<link rel="shortcut icon" href="#" />
	<link rel="stylesheet" href="layui/css/layui.css">
	<script type="text/javascript" src="js/jquery1.9.1.js"></script>
	<script type="text/javascript" src="js/jquery.validate.min.js"></script>
	<script src="layui/layui.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script src="js/fireworks.js"></script>
</head>

<body>

	<div id="box"></div>
	<div id="redistBox">
		<div class="form">
			<h2>
            <span>注册</span>
        </h2>
		</div>
		<form class="layui-form" id="regist-form" action="">
			<div class="layui-form-item space">
				<label class="layui-form-label">账号：</label>
				<div class="layui-input-inline">
					<input id="userName" class="layui-input a" type="text" lay-verify="userName" placeholder="请输入昵称" name="userName" autocomplete="off">
				</div>
			</div>
			<div class="layui-form-item space">
				<label class="layui-form-label">密码：</label>
				<div class="layui-input-inline">
					<input id="userPassword" class="layui-input" type="password" lay-verify="pwd" placeholder="请输入密码" name="userPassword" autocomplete="off">
				</div>
			</div>
			<div class="space">
				<label class="layui-form-label">手机号：</label>
				<div class="layui-input-inline">
					<input id="userPhone" class="layui-input phone" type="text" lay-verify="phone" placeholder="请填写手机号" name="userPhone" autocomplete="off">
				</div>
				<button class="layui-btn" type="button" id="sendCode">获取验证码</button>
			</div>
			<div class="layui-form-item space">
				<label class="layui-form-label">验证码：</label>
				<div class="layui-input-inline">
					<input id="code" class="layui-input" type="text" lay-verify="code" placeholder="请输入验证码" name="code" autocomplete="off">
				</div>
			</div>
			<div class="layui-form-item xieyi">
				<input id="xieyi" type="checkbox" value="true" lay-skin="primary" title="已同意" checked="checked">
				<a href="TCPOne.html">《协议一》</a>
				<span>和</span>
				<a href="TCPSecond.html">《协议二》</a>
			</div>
			<div class="layui-form-item space">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="regist" id="regist">注册</button>
				</div>
			</div>
			<div id="login">
				<a href="login.html">已有账号，直接登录</a>
			</div>
		</form>
	</div>
</body>

<script>
		$('#box').fireworks({
			sound: true,
			opacity: 0.3,
			width: '100%',
			height: '100%'
		});

	layui.use(['form','layer'], function(form,layer) {
		//  异步判断用户是否存在
		$("#userName").on("blur", function() {
			var userName = $("#userName").val();
			$.ajax({
				type: "get",
				url: apiPath + "/users?userName=" + userName,
				success: function(data) {
					if(data.code == 200) {
                       layer.alert(data.data+"该用户已存在");
					}
				}
			});
		})
		
		//  异步判断手机号是否存在
		$("#userPhone").on("blur", function() {
			var userPhone = $("#userPhone").val();
			$.ajax({
				type: "get",
				url: apiPath + "/users/" + userPhone +"/c",
				success: function(data) {
					if(data.code == 200) {
                       layer.alert(data.data+"该手机号已经注册");
					}
				}
			});
		})
		
		form.verify({
			userName: function(value) {
				if(value < 1) {
					return "用户名不能为空";
				}
				if(value.length < 2) {
					return "用户名不能小于两个字";
				}
				if(value.length > 30) {
					return "用户名不能大于三十个字";
				}
			},
			pwd: function(value) {
				if(value < 1) {
					return "密码不能为空";
				}
				if(value.length < 8 && value.length > 16) {
					return "密码长度为6-16";
				}
				if(!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}$/.test(value)) {
					return "密码需要是强密码类型";
				}
			},
			phone: function(value) {
				if(value < 1) {
					return "手机号不能为空";
				}
				if(!/^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,3,7,8]|8[0-9]|9[1,8,9])\d{8}$/.test(value)) {
					return "手机号格式不正确";
				}
			},
			code: function(value) {
				if(value < 1) {
					return "验证码不能为空";
				}
			}
		});

		

		form.on('submit(regist)', function(data) {
			var userName = $("#userName").val();
			var passWord = $("#userPassword").val();
			var userPhone = $("#userPhone").val();
			var code = $("#code").val();
			//  检测前端表单的值是否成功
			//			alert(userName +"  " + userPassword+"  "+passWord+"  "+userPhone+"  "+code)
			$.ajax({
				type: "post",
				url: apiPath + "/users/" + userPhone,
				contentType: "application/json;charset=utf-8",
				data: JSON.stringify({
					userName: userName,
					passWord: passWord,
					code: code
				}),
				success: function(data) {
					if(data.code == "200") {
						location.href = "index.html?root=" + userName
					}
				},
				error: function(data) {
					var result = jQuery.parseJSON(data.responseText);
					var errMsg = result.errMsg;
					layer.alert(errMsg);
				}
			});
			return false;
		});

		//  发送短信验证码的校验
		//发送验证码按钮点击事件
		$('#sendCode').on("click", function() {
			//获取前面填写的手机号
			var userPhone = $("input[type=text][name=userPhone]").val();
			//校验手机号
			//1.非空
			if($.trim(userPhone).length == 0) {
				layer.alert("要发送短信的手机号不能为空");
				return;
			}
			//2.格式
			if(!/^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,3,7,8]|8[0-9]|9[1,8,9])\d{8}$/.test(userPhone)) {
				layer.alert("要发送短信的手机号格式不正确");
				return;
			}
			//3.发送Ajax请求，让服务器端来发送短信验证码
			$.ajax({
				type: "get",
				url: apiPath + "/users/" + userPhone,
				data: {

				},
				success: function(data) {
					console.log(typeof data.code)
					if(data.code == "200") {
						layer.alert("验证码已发送，请注意查收");
					} else {
						layer.alert("验证码发送失败，请点击重新发送");
					}
				},
				error: function(data) {
					var result = jQuery.parseJSON(data.responseText);
					var errMsg = result.errMsg;
					layer.alert(errMsg);
				}
			});

		});
	});
</script>

</html>